import { useContext } from 'react'

import FoodTag from '../FoodTag'
import AddFoodTag from '../AddFoodTag'
import { DataContext } from '../../store/DataContext'

import './turnMenu.scss'

export default function TurnMenu() {

    const { data, dispatch } = useContext(DataContext)

    return (
        <div className='turn_menu'>
            {
                data.map(item => {
                    return <FoodTag key={item.id} props={{ title: item.title, id: item.id, data, dispatch }} />
                })
            }
            <AddFoodTag />
        </div>
    )
}
